<template>
	<div class="all">
		<h3 class="title">
			<span :class="{'icon-xuanzhong':true,lighticon:allBol}" @click="allLight()"></span>
			<span class="icon-feiji"></span>
			<span>{{data.areaType}}</span>
		</h3>
		<div class="commodity" v-for="item in data.commoditys">
			<div class="commodityLeft">
				<span class="icon-xuanzhong" :class="{'lighticon':item.xuanzhong==1}" @click="Light($event,item)"></span>
				<div class="model"><img :src="item.imgurl" class="commodityImg"/></div>
				
			</div>
			<div class="commodityRight">
				<h4>{{item.name}}</h4>
				<h5>规格:<span>{{item.specification}}</span></h5>
				<h5>综合税:<span>{{item.taxes}}%</span></h5>
				<div class="commodityRight-b">
					<div class="commodityBtn" @click="changNum($event,item)">
						<span class="minusBtn">-</span>
						<em>{{item.num}}</em>
						<span class="addBtn">+</span>	
					</div>
					¥<span>{{item.price}}</span>
				</div>
			</div>
		</div>
		<p><span>{{"¥"+data.allPrice.toFixed(2)}}</span>商品金额</p>
		<p><span>{{"¥"+data.allTaxes.toFixed(2)}}</span>综合税总额</p>
		<p><span>{{"¥"+data.endPrice.toFixed(2)}}</span>应付总金额</p>
		<div class="close">
			<span @click="jiesuan()">结算 ({{this.num}})</span>
		</div>
	</div>
</template>
<script>
	export default {
		name:"CShoppingAccounts",
		props:["data"],
		data(){
			return{
				theIds:[],
				allBol:true,
				jiesuanArr:[],
				num:0
			}
		},
		watch:{
				data:function(news,old){

					this.jisuan();
					
				}
		},
		created:function(){
			this.jisuan();		
		},
		methods:{
			jisuan:function(){
				
				this.jiesuanArr = [];
				this.num=0;
				for(var i=0;i<this.data.commoditys.length;i++){
					if(this.data.commoditys[i].xuanzhong==1){
						this.jiesuanArr.push(this.data.commoditys[i]);
						this.num+=this.data.commoditys[i].num;
					}
				}

			},
			allLight:function(){
				this.allBol = !this.allBol;
				var xuanzhong = null;
				if(this.allBol){
					xuanzhong = 1;
				}else{
					xuanzhong = 0;
				}
				var shoppingCarName=this.$store.state.personInfor[0].login.shoppingCarName;
				this.axios.post("/api/changeCar",
					{
						sign:"更改全选",
						theChange:this.data.commoditys,
						shoppingCarName:shoppingCarName,
						xuanzhong:xuanzhong
					}).then(function(data){
					this.$store.commit('changeCarData',data.data);
				}.bind(this))
				
			},
			Light:function(e,item){
				var obj={id:item.id,num:item.num};
				var k=-1;
				for(var i=0;i<this.data.commoditys.length;i++){
					if(this.data.commoditys[i].id==obj.id){
						k=i;
						break;
					}
				}
				
				var xuanzhong = this.data.commoditys[k].xuanzhong==0?1:0;
				this.data.commoditys[k].xuanzhong = xuanzhong;
				var shoppingCarName=this.$store.state.personInfor[0].login.shoppingCarName;
				this.axios.post("/api/changeCar",
					{
						sign:"更改选中",
						theChange:this.data.commoditys[k],
						shoppingCarName:shoppingCarName,
						xuanzhong:xuanzhong
					}).then(function(data){
					this.$store.commit('changeCarData',data.data);
				}.bind(this))
				
				
				
				
			},
			changNum:function(e,item){
				var k=-1;
				for(var i=0;i<this.data.commoditys.length;i++){
					if(this.data.commoditys[i].id==item.id){
						k=i;
						break;
					}
				}
				var f=false;
				if($(e.target).text()=='-'){
					if(item.num==1){
						this.data.commoditys[k].num=1;
						f=false;
					}else{
						this.data.commoditys[k].num--;
						f=true;
					}
				}else if($(e.target).text()=='+'){
					this.data.commoditys[k].num++;
					f=true;
				}
				
				if(f){
					var shoppingCarName=this.$store.state.personInfor[0].login.shoppingCarName;
					this.axios.post("/api/changeCar",
						{
							sign:"更改数量",
							theChange:this.data.commoditys[k],
							shoppingCarName:shoppingCarName
						}).then(function(data){
						this.$store.commit('changeCarData',data.data);
					}.bind(this))
						
				}
			},
			jiesuan:function(){
				
				this.$store.commit('changejieObj',{data:this.data,num:{num:this.num}});
				
				
				var shoppingCarName=this.$store.state.personInfor[0].login.shoppingCarName;
				this.axios.post("/api/changeCar",
					{
						sign:"删除数据",
						data:this.data,
						shoppingCarName:shoppingCarName
					}).then(function(data){
					this.$store.commit('changeCarData',data.data);
				}.bind(this))
					
				this.$router.push({path:'/CsureOrder'})
				console.log(this.$store.state.jieObj)
			}
			
		}
	}
</script>
<style scoped>
	.title{
		font-weight: 400;
		font-size: 1.4rem;
		line-height: 2.5rem;
		border-bottom:1px solid lightgray;
	}
	.icon-xuanzhong{
		border:1px solid lightgray;
		border-radius: 50%;
		display: inline-block;
		width: 1.3rem;
		height: 1.3rem;
		vertical-align: -0.1rem;
		margin-left: 0.8rem;
	}
	.lighticon{
		background: url(../../../static/C-img/选中.png) no-repeat;
		background-size: 100% 100%;
		border: 1px solid white;
	}
	.icon-feiji{
		display: inline-block;
		width: 1.4rem;
		height: 1.4rem;
		vertical-align: -0.2rem;
		background: url(../../../static/C-img/飞机.png) no-repeat;
		background-size: 100% 100%;
	}
	.commodity{
		border-bottom:1px solid lightgray;
		overflow: hidden;
	}
	.commodityLeft{
		float: left;
	}
	.model{
		width: 3.8rem;
		height: 4rem;
		margin: 2rem;
		text-align: center;
		display: inline-block;
	}
	.commodityImg{
		height: 100%;
	}
	.commodityLeft .icon-xuanzhong{
		vertical-align: 3.2rem;
	}
	.commodityRight{
		font-weight: 400;
	}
	.commodityRight h4{
		padding: 0.5rem 0;
		font-weight: 400;
		font-size: 1.2rem;
	}
	.commodityRight h5{
		font-weight: 400;
		font-size: 1rem;
	}
	.all{
		border-bottom:1px solid #cccccc;
		margin-bottom: 1rem;
		background-color: white;
	}
	
	.commodityRight-b{
		color: red;
		line-height: 2.6rem;
		font-size: 0.9rem;
	}
	.commodityBtn{
		color:black;
		float: right;
		border:1px solid lightgray;
		padding: 0.08rem;
		border-radius: 1rem;
		width: 6.5rem;
		text-align: center;
		height:2rem;
	}
	.commodityBtn>span{
		width: 1.8rem;
		height: 1.8rem;
		line-height: 1.7rem;
		display: inline-block;
		font-size: 1.5rem;
		border:1px solid lightgray;
		border-radius: 50%;
		text-align: center;
	}
	.commodityBtn em{
		font-style: normal;
		line-height: 2rem;
		vertical-align: 0.2rem;
		
	}
	.addBtn{
		float: right;
		
	}
	.minusBtn{
		float:left;
	}
	.all>p{
		border-bottom:1px solid lightgray;
		font-size: 1.15rem;
		font-weight: 400;
		line-height: 4rem;
		padding-left: 3rem;
		padding-right: 1rem;
	}
	.all>p>span{
		color: red;
		float: right;
		font-size: 1.1rem;
	}
	.close{
		padding:0.5rem;
		overflow: hidden;
	}
	.close>span{
		display: inline-block;
		background-color: red;
		float: right;
		color: white;
		font-weight: 400;
		padding: 0 1rem;
		line-height: 2rem;
		border-radius: 1rem;
	}
	em{
		font-size: 0.9rem;
	}
</style>